/* eslint-disable import/first */
import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { CloseFilled16 as ClearIcon } from '@carbon/icons-react';

import dayjs from 'dayjs';

import { DateRangePicker } from 'react-dates';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import Datetime from '@knownsec/react-component/dist/Datetime'
import moment from 'moment'

import s from './style.module.css';

function isBeforeDay(a, b) {
	if (!dayjs.isDayjs(a) || !dayjs.isDayjs(b)) return false;

	const aYear = a.year();
	const aMonth = a.month();

	const bYear = b.year();
	const bMonth = b.month();

	const isSameYear = aYear === bYear;
	const isSameMonth = aMonth === bMonth;

	if (isSameYear && isSameMonth) return a.date() < b.date();
	if (isSameYear) return aMonth < bMonth;
	return aYear < bYear;
}

function isInclusivelyAfterDay(a, b) {
	if (!dayjs.isDayjs(a) || !dayjs.isDayjs(b)) return false;
	return isBeforeDay(a, b);
}

function DateRange({ value, className, onChange, maxDay, showTime=false, ranges={}, ...props }) {
	const [focusInput, setFocusInput] = React.useState(null);
	const { startDate, endDate } = React.useMemo(() => {
		return {
			startDate: value?.startTime ? moment(value.startTime) : null,
			endDate: value?.endTime ? moment(value.endTime) : null,
		};
	}, [value]);
	const defaultProps = React.useMemo(() => {
		if (!maxDay) return props;
		return {
			...props,
			isOutsideRange: day =>
				!isInclusivelyAfterDay(day, dayjs().add(1, 'days')) ||
				isInclusivelyAfterDay(day, dayjs().subtract(maxDay, 'days')),
		};
	}, [props]);

	const handleChange = (date) => {
		if (date) {
			onChange({
				startTime: moment(date[0]).hour(0).minute(0).second(0).format('YYYY-MM-DD HH:mm:ss'),
				endTime: moment(date[1]).hour(23).minute(59).second(59).format('YYYY-MM-DD HH:mm:ss')
			});
		} else {
			onChange({
				startTime: '',
				endTime: ''
			});
		}
	};
	const disabledDate = (current) => {
    return current.diff(moment(), 'days', true) >= 0
			|| current.diff(moment().subtract(maxDay || 180, 'days'), 'days', true) <= 0;
 	}
	return (
		<div className={cn(className, s.dateRange)}>
			{/* <DateRangePicker
				{...defaultProps}
				startDate={startDate}
				endDate={endDate}
				onDatesChange={handleChange}
				focusedInput={focusInput}
				onFocusChange={setFocusInput}
			/> */}
			<Datetime
				{...props}
				ranges={ranges}
				showTime={showTime}
				disabledDate={disabledDate}
				value={startDate && endDate ? [startDate, endDate] : []}
				onChange={handleChange} />
		</div>
	);
}

DateRange.propTypes = {
	className: PropTypes.string,
	value: PropTypes.shape({
		startTime: PropTypes.string,
		endTime: PropTypes.string,
	}),
	onChange: PropTypes.func,
	startDatePlaceholderText: PropTypes.string,
	endDatePlaceholderText: PropTypes.string,
	maxDate: PropTypes.object,
	maxDay: PropTypes.number,
};
DateRange.defaultProps = {
	className: s.dateRange,
	onChange() {},
	startDatePlaceholderText: '开始时间',
	endDatePlaceholderText: '结束时间',
	showClearDates: false,
	hideKeyboardShortcutsPanel: true,
	startDateId: 'startTime',
	endDateId: 'endTime',
	displayFormat: 'YYYY-MM-DD',
	monthFormat: 'YYYY[年]MM[月]',
	appendToBody: false,
	disableScroll: false,
	minimumNights: 0,
	phrases: { closeDatePicker: '关闭', clearDates: '清除日期' },
	initialVisibleMonth: () => dayjs().subtract(1, 'M'),
	customCloseIcon: <ClearIcon className={s.clearIcon} />,
	isOutsideRange: day => !isInclusivelyAfterDay(day, dayjs().add(1, 'days')),
};

export default DateRange;
